iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 19
0
自我挑戰組

挑戰跨領域的金流功能網頁系列 第 20

Side Shopping Cart - part 3

  • 分享至 

  • xImage
  •  

接著開始著手修改購屋車無法刪除項目的功能
http://ithelp.ithome.com.tw/upload/images/20161219/20103530gCPBgut1Dr.jpg

找了其他的購物車程式來修改
http://ithelp.ithome.com.tw/upload/images/20161219/20103530NbwLwgYVi4.jpg

畫面變成這樣,融合兩種版面在一起
http://ithelp.ithome.com.tw/upload/images/20161219/20103530BEMhsgPlf0.jpg

第一個購物車程式範本,也就是side shopping cart,所使用的程式是以下
http://ithelp.ithome.com.tw/upload/images/20161219/20103530zhfS9WXk7X.jpg

第二個購物車程式範本是以下
http://ithelp.ithome.com.tw/upload/images/20161219/20103530WhiI7Eqm3X.jpg

兩者所使用的ID是不一樣的
前者為ul id="cd-gallery-items",後者為div id="product_list",撇開兩者class為不同,id的影響力更為甚大,所以小編我先從兩者javascript先了解一番。

前者cd-gallery-items所描述的語法如下,看來應該是針對螢幕版面進行優化的CSS語法,js裡所有的語法找不到此id,所以cd-gallery-items應該是僅止用於版面上美觀的id
http://ithelp.ithome.com.tw/upload/images/20161219/20103530rNPvFoaGh7.jpg

接下來看後者product_list的相關聯語法,看來也是針對螢幕版面優化
http://ithelp.ithome.com.tw/upload/images/20161219/201035301c7UMSGCaV.jpg

所以小編我先暫時將後者語法中的 div class="product_list" 給刪除,讓後者的商品頁可以隨著螢幕縮放,然後調整到可以取代前者side shopping cart的商品頁面,然後版面半成這樣
http://ithelp.ithome.com.tw/upload/images/20161219/20103530E5lSW3rsZ2.jpg

頁面縮放到最小的時候變成如此
http://ithelp.ithome.com.tw/upload/images/20161219/20103530hHg2QmoxWq.jpg


上一篇
Side Shopping Cart - part 2
下一篇
Side Shopping Cart - part 4
系列文
挑戰跨領域的金流功能網頁29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言